<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Dagre Layout By Other Library</title>
  </head>
  <style>
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>
  
  <body>
    <div id="mountNode"></div>
    <script src="./assets/dagre.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [{
          id: 1,
          type: 'alps',
          name: 'alps_file1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 2,
          type: 'alps',
          name: 'alps_file2',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 3,
          type: 'alps',
          name: 'alps_file3',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 4,
          type: 'sql',
          name: 'sql_file1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 5,
          type: 'sql',
          name: 'sql_file2',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 6,
          type: 'feature_etl',
          name: 'feature_etl_1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 7,
          type: 'feature_etl',
          name: 'feature_etl_1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: 8,
          type: 'feature_extractor',
          name: 'feature_extractor',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        }],
        edges: [{
          source: 1,
          target: 2
        },
        {
          source: 1,
          target: 3
        },
        {
          source: 2,
          target: 4
        },
        {
          source: 3,
          target: 4
        },
        {
          source: 4,
          target: 5
        },
        {
          source: 5,
          target: 6
        },
        {
          source: 6,
          target: 7
        },
        {
          source: 7,
          target: 8
        }]
      };
      const g = new dagre.graphlib.Graph();
      g.setDefaultEdgeLabel(function() {
        return {};
      });
      g.setGraph({
        rankdir: 'TB'
      });
      const labelStyle = {
        style: {
          fill: '#fff',
          fontSize: 14,
          fontWeight: 'bold'
        }
      };
      const edgeStyle = {
        endArrow: true,
        lineWidth: 2,
        stroke: 'rgb(76,122,187)'
      };
      data.nodes.forEach(node => {
        node.id = node.id + '';
        node.shape = 'sql';
        node.label = node.name;
        node.labelCfg = labelStyle;
        node.size = [150, 50];
        g.setNode(node.id + '', {
          width: 150,
          height: 50
        });
      });
      data.edges.forEach(edge => {
        edge.source = edge.source + '';
        edge.target = edge.target + '';
        edge.style = edgeStyle;
        edge.shape = 'polyline';
        g.setEdge(edge.source, edge.target);
      });
      dagre.layout(g);
      let coord;
      g.nodes().forEach((node, i) => {
        coord = g.node(node);
        data.nodes[i].x = coord.x;
        data.nodes[i].y = coord.y;
      });
      g.edges().forEach((edge, i) => {
        coord = g.edge(edge);
        data.edges[i].startPoint = coord.points[0];
        data.edges[i].endPoint = coord.points[coord.points.length - 1];
        data.edges[i].controlPoints = coord.points.slice(1, coord.points.length - 1);

      });
      G6.registerNode('sql', {
        drawShape(cfg, group) {
          const rect = group.addShape('rect', {
            attrs: {
              x: -75,
              y: -25,
              width: 150,
              height: 50,
              radius: 10,
              stroke: 'rgb(36,60,96)',
              fill: 'rgb(76,122,187)'
            }
          });
          return rect;
        }
      },
      'single-shape');
      G6.Global.nodeStateStyle.selected = {
        stroke: '#d9d9d9',
        fill: '#5394ef'
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'click-select', {
            type: 'tooltip',
            formatText(model) {
              const cfg = model.conf;
              const text = [];
              cfg.forEach(row => {
                text.push(row.label + ':' + row.value + '<br>');
              });
              return text.join('\n');
            },
            shouldUpdate: e => {
              // 如果移动到节点文本上显示，不是文本上不显示
              if (e.target.type !== 'text') {
                return false;
              }
              return true;
            }
          }]
        },
        fitView: true
      });
      graph.data(data);
      graph.render();
    </script>
  </body>

</html>